<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器 */
        #div {
            width: 100px;
            height: 100px;
            background: red;
        }

        /* class选择器 */
        .div {
            width: 100px;
            height: 100px;
            background: blue;
        }

        /* 伪类 */
        /* ul li + li {
            color: red;
        }

        ul li {
            font-size: 30px;
        }

        ul li:first-child {
            color: pink;
        }

        ul li:last-child {
            color: black;
        }

        ul li:nth-child(2) {
            color: green;
        } */

        .list li:nth-child(2n) {
            color: blue;
        }

        .list li:nth-child(2n+1) {
            color: red;
        }

        /* 通配符 */
        * {
            margin: 10px;
        }
    </style>
</head>
<body>
    
    <!-- 选择器 -->

    <!-- 
        id选择器
        class选择器
        兄弟选择器
        后代选择器
        伪类
        通配符
        伪元素选择器
     -->
     <div id="div"></div>

     <div class="div"></div>
     <!-- <ul>
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
         <li>item4</li>
     </ul> -->

     <!-- <ul class="list">
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
         <li>item4</li>
         <li>item5</li>
         <li>item6</li>
     </ul> -->

    <!-- 选择器权重 -->
</body>
</html>